<template>
	<div class="app-container" v-loading="data.mtloading">
		<el-form :model="data.info" :rules="data.rules" class="w-full mt-4" label-width="130" ref="ruleFormRef">

			<el-form-item :label="$t('log.title') + ':'" prop="title" class="w-1/2">
				<el-input v-model="data.info.title" :placeholder="$t('message.pleaseEnter')" readonly />
			</el-form-item>

			<el-form-item :label="$t('log.version') + ':'" prop="version_no" class="w-1/2">
				<el-input v-model="data.info.version_no" :placeholder="$t('message.pleaseEnter')" readonly />
			</el-form-item>

			<el-form-item :label="$t('log.content') + ':'" prop="content" class="w-1/2">
				<el-input v-model="data.info.content" :placeholder="$t('message.pleaseEnter')"
					:autosize="{ minRows: 8, maxRows: 10 }" type="textarea" />
			</el-form-item>

			<div class="w-1/2 text-center mt-4 ml-6">
				<div class="inline-block">

					<el-button type="primary" size="small" @click="submit(ruleFormRef)">
						<template #default>
							<span class="text-sm">{{ $t('public.save') }}</span>
						</template>
					</el-button>

					<el-button size="small" @click="cancell">
						<template #default>
							<span class="text-sm">{{ $t('public.cancel') }}</span>
						</template>
					</el-button>

				</div>
			</div>

		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { updatelog } from '@/api/log';
import { useRouter, useRoute } from "vue-router";
let ruleFormRef = ref<any>();
const router = useRouter()
const route = useRoute()

let data = reactive({
	mtloading: false, // 加载
	info: {}, // 主体信息
	rules: { // 表单验证
		content: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
	},
})
// 取消
let cancell = () => {
	getinfo()
	router.back()
}
// 获取信息
let getinfo = () => {
	let info = JSON.parse(decodeURI(route.query.l)).info
	data.info = {
		id: info.id,
		title: info.title,
		version_no: info.version_no,
		content: info.content
	}
}

// 保存
let submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			data.mtloading = true
			updatelog(data.info).then(res => {
				data.mtloading = false
				if (res.state == 200) {
					ElMessage({
						message: $t('message.modifySuccess'),
						type: 'success'
					})
					router.back()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}
	})
}

getinfo()

</script>
